<script setup lang="ts">
import { useRoute } from "vue-router";
import { onMounted, ref } from "@vue/runtime-core"
import axios from "axios";

interface RateTags {
    value: string
}
interface RateInfoV2List {
    user: {
        avatar: string
        uname: string
    }
    content: string
    style: string
}

const route = useRoute()
const iid = route.query.itemId
const cRate = ref<number>()
const cScore = ref<string>()
const rateTags = ref<RateTags[]>([])
const rateInfoV2List = ref<RateInfoV2List[]>([])

const getComment = () => {
    axios
        .get(`https://apis.netstart.cn/mogujie/goods/detail?itemId=${iid}`)
        .then(({ data }) => {
            cRate.value = data.data.result.rateInfo.cRate
            cScore.value = data.data.result.rateInfoV2?.cScore
            rateTags.value = data.data.result.rateInfoV2?.rateTags.map((i: RateTags) => {
                return {
                    value: i.value
                }
            })
            rateInfoV2List.value = data.data.result.rateInfoV2?.list?.map((i: RateInfoV2List) => {
                return {
                    user: i.user,
                    avatar: i.user?.avatar,
                    uname: i.user.uname,
                    content: i.content,
                    style: i.style
                }
            })
            console.log(data);
        })
}

onMounted(() => {
    getComment()
})
</script>

<template>
    <div class="mgj-rate">
        <div class="rate">
            <div class="head-content">
                <div class="head-left" @click="$router.go(-1)">
                    <van-icon name="arrow-left" />
                </div>
                <div class="head-title">所有评价</div>
                <div class="head-right"></div>
            </div>
            <div class="averate-average">
                <span>综合评分</span>
                <span>{{ cScore }}</span>
            </div>
            <div class="topRateTags">
                <div class="rate-first-tags">
                    <div>全部</div>
                    <div>
                        <span>五星好评</span>
                        <span>({{ cRate }})</span>
                    </div>
                </div>
                <div class="rate-first-item">
                    <div class="tags-content" v-for="(r, i) in rateTags" :key="i">
                        <div class="tag-item">
                            <div class="tag-item-content">
                                <div>{{ r.value }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="list-wrapper">
                <div class="list-page" v-for="(l, y) in rateInfoV2List" :key="y">
                    <div class="rate-item-ratelist">
                        <div class="item-user-info">
                            <div class="user-info">
                                <div class="meili-base-image">
                                    <img :src="l.user.avatar" alt="" />
                                </div>
                                <div class="item-user-info-right">
                                    <div class="item-body-name">{{ l.user.uname }}</div>
                                    <div class="item-body-attr">
                                        {{ l.style }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item-body">
                            <div class="item-rate-body">
                                <div class="bottom-gutter">
                                    <div class="item-body-content">
                                        {{ l.content }}
                                    </div>
                                </div>
                            </div>
                            <div class="item-footer">
                                <div class="useful-btn">
                                    <div class="useful-btn-img">
                                        <img src="@/assets/liveimg/thumbs-up.png" alt="" />
                                    </div>
                                    <div>有用</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="list-bottom">没有更多内容了</div>
        </div>
    </div>
</template>



<style lang="scss" scoped>
.mgj-rate {
    user-select: none;
    background-color: #f5f5f5;

    .rate {
        .head-content {
            display: flex;
            height: 55px;
            line-height: 55px;
            justify-content: space-between;
            box-shadow: 0 15px 10px -15px #3d3b3b;
            margin: 10px;

            .head-left {
                width: 20px;
                height: 20px;

                img {
                    display: block;
                    width: 100%;
                }
            }
        }

        .averate-average {
            padding: 10px;
            height: 30px;
            line-height: 30px;
            background-color: #fef0f0;

            span {
                font-size: 14px;

                &:nth-child(1) {
                    color: #777;
                }

                &:nth-child(2) {
                    color: #fc5785;
                    margin-left: 5px;
                }
            }
        }

        .topRateTags {
            padding: 10px;

            .rate-first-tags {
                display: flex;
                margin-bottom: 10px;

                div {
                    padding: 5px;
                    font-size: 14px;

                    &:nth-child(1) {
                        margin-right: 10px;
                        border-radius: 12px;
                        background-color: #f46;
                        color: #fff;
                    }
                }
            }

            .rate-first-item {
                display: flex;
                flex-wrap: wrap;

                .tags-content {
                    //   justify-content: space-between;

                    .tag-item {
                        flex: 1;

                        .tag-item-content {
                            color: #333;

                            height: 20px;
                            line-height: 20px;
                            padding: 0 10px;
                            font-size: 12px;
                            margin: 0 10px;

                            div {
                                background-color: #fff6f6;
                            }
                        }
                    }
                }
            }
        }

        .list-wrapper {
            .list-page {
                .rate-item-ratelist {
                    padding: 10px 0;
                    margin-top: 10px;
                    background-color: #fff;

                    .item-user-info {
                        padding: 0 10px;

                        .user-info {
                            display: flex;
                            align-items: center;

                            .meili-base-image {
                                width: 40px;
                                height: 40px;
                                overflow: hidden;
                                border-radius: 100%;
                                display: inline-block;
                                margin-right: 10px;
                                background-color: #e4e4e4;

                                img {
                                    display: block;
                                    width: 100%;
                                    border-radius: 50%;
                                }
                            }

                            .item-user-info-right {
                                font-size: 14px;

                                .item-body-name {
                                    color: #333;
                                    font-weight: 700;
                                    margin-bottom: 5px;
                                }

                                .item-body-attr {
                                    color: #999;
                                    font-size: 12px;
                                }
                            }
                        }
                    }
                }

                .item-body {
                    .item-rate-body {
                        padding: 10px;

                        .bottom-gutter {
                            margin-bottom: 10px;

                            .item-body-content {
                                color: #333;
                                font-size: 12px;
                                line-height: 24px;
                            }
                        }
                    }

                    .item-footer {
                        display: flex;
                        justify-content: space-between;
                        padding: 0 10px;
                        font-size: 12px;

                        .useful-btn {
                            display: flex;
                            align-items: center;

                            .useful-btn-img {
                                width: 20px;
                                height: 20px;
                                margin-right: 5px;

                                img {
                                    display: block;
                                    width: 100%;
                                }
                            }
                        }
                    }
                }
            }
        }

        .list-bottom {
            color: #999;
            margin-top: 5px;
            text-align: center;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
        }
    }
}
</style>